<template>
  <div class="stat-card" :class="trendClass">
    <div class="icon">
      <i :class="`icon-${icon}`"></i>
    </div>
    <div class="content">
      <div class="title">{{ title }}</div>
      <div class="value">{{ formattedValue }}</div>
      <div class="trend" v-if="trend !== 0">
        <i :class="trendIcon"></i>
        {{ Math.abs(trend) }}%
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  title: { type: String, required: true },
  value: { type: Number, required: true },
  icon: { type: String, required: true },
  trend: { type: Number, default: 0 }
})

const formattedValue = computed(() => {
  if (props.value >= 10000) {
    return `${(props.value / 10000).toFixed(1)}万`
  }
  return props.value.toLocaleString()
})

const trendClass = computed(() => ({
  'trend-up': props.trend > 0,
  'trend-down': props.trend < 0
}))

const trendIcon = computed(() => 
  props.trend > 0 ? 'icon-up' : 'icon-down'
)
</script>

<style scoped>
.stat-card {
  background: white;
  border-radius: 4px;
  padding: 16px;
  box-shadow: none;
  border: 1px solid #ebeef5;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: #c0c4cc;
}

.icon {
  font-size: 22px;
  margin-right: 16px;
  color: var(--el-color-primary);
  opacity: 0.8;
}

.content {
  flex: 1;
}

.title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 6px;
}

.value {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #303133;
}

.trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend-up {
  border-left: 3px solid var(--el-color-success);
  padding-left: 8px;
}

.trend-down {
  border-left: 3px solid var(--el-color-danger);
  padding-left: 8px;
}

.trend-up .trend {
  color: var(--el-color-success);
}

.trend-down .trend {
  color: var(--el-color-danger);
}
</style>
